import React,{useEffect, useState} from 'react';
// react 数据的单向绑定
// export const Myconponent=props=>{
//     // React.useState('Json Deo');
//     const [Myname,setMyname]=useState('Jone Deo');
//     const setmyname=function (e){
//         console.log(e);
//         setMyname(e.target.value);
//     }
//     const onInputChange=function(e){
//         setMyname(e.target.value);
//     }
//     useEffect(()=>{
//         setTimeout(() => {
//             setMyname('罗超');
//         }, 2000);
//     })
//     return (
//         <>
//             {/* <h2>My Component!</h2> */}
//             <h4>{Myname}</h4>
//             <input value={Myname} onChange={onInputChange} />
//             {/* <input value={Myname} onChange={(e)=>setmyname(e)} /> */}
//         </>
//     )
// }
export const Myconponent=props=>{
    const [userInfo,setUserInfo]=useState({
        name:'John',
        lastname:'Doe'
    })
    const userInfoChange=(e)=>{
        let obj={...userInfo};
        obj.name=e.target.value;
        setUserInfo(obj);
    }
    return (
        <>
            <h4>{userInfo.name} {userInfo.lastname}</h4>
            <input value={userInfo.name} onChange={userInfoChange} />
            <input value={userInfo.lastname} onChange={(e)=>{setUserInfo({
                ...userInfo,
                lastname:e.target.value
            })}} />
        </>
    )
}
export default Myconponent; 

export const Secondcomponent=props=>{
    return (
        <>
            <h2>Second Component!</h2>
        </>
    )
}